<template>
  <div>
     <!-- 头部 -->
     <Header v-show="$route.meta.show"></Header>
      <!-- 酒店预订界面 -->
      <div class="about-us">
        <div class="location common">
          <h2>关于我们</h2>
          <p>ABOUT US</p>
        </div>
        <hr>
        <div class="about-container">
          <!-- 百度地图 -->
          <div id="container">
          </div>
          <div class="mess-body">
            <!-- 留言 -->
            <div class="message">
              <form>
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name" required>

                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email" required>

                <label for="message">留言:</label>
                <textarea id="message" name="message" required></textarea>
                <button type="submit">提交</button>
              </form>
            </div>
            <!-- 联系方式 -->
            <div class="tel">
              <h2>联系方式</h2>
              <p>地址:扬州大学</p>
              <p>手机:12345678</p>
              <p>qq:1304764264</p>
              <p>邮箱:mml101718@163.com</p>
            </div>
          </div>

        </div>
    </div>
    <Footer v-show="$route.meta.show"></Footer>
  </div>
</template>
<script type="text/javascript"
    src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=veq65n4Xy5pXtaGymIi5GYBV5W4vu4Ed">
</script>

<script>
import Header from '@/components/Header/index.vue'
import Footer from '@/components/Footer/index.vue'
export default {
  name: 'aboutUs',
  components: {
    Header,
    Footer
  },
  data () {
    return {

    }
  },

  mounted () {
    this.loadMap()
  },

  methods: {
    loadMap () {
      const map = new BMapGL.Map('container')
      var point = new BMapGL.Point(115.744895, 33.00855)
      map.centerAndZoom(point, 15)
      const scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件
      map.addControl(scaleCtrl)
      var point = new BMapGL.Point(115.744895, 33.00855)
      const marker = new BMapGL.Marker(point) // 创建标注
      map.addOverlay(marker)
      map.enableScrollWheelZoom()
    }
  }
}
</script>

<style lang="less" scoped>
.about-container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;

  #container {
    width: 1200px;
    height: 300px;
    margin: 0 auto;
  }

  .mess-body {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;

    .message form {
      width: 500px;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .message label {
      display: block;
      margin-bottom: 5px;
    }

    .message input,
    textarea {
      display: block;
      width: 100%;

      padding: 10px;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    textarea:last-child {
      height: 100px;
    }

    .message button[type="submit"] {
      background-color: #4CAF50;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .message button[type="submit"]:hover {
      background-color: #3e8e41;
    }
  }
}

.location {
  width: 1200px;
  overflow: hidden;
  margin: 0 auto;
}

.location h2 {
  overflow: hidden;
  font-size: 30px;
  font-weight: 400;
  padding: 5px 10px 5px 25px;
  float: left;
}

.location h2::after {
  content: "";
  background-color: #01a1ff;
  display: block;
  width: 4px;
  height: 42px;
  margin-left: -10px;
  margin-top: -40px;
}

.location p {
  float: left;
  padding-top: 25px;
}

hr {
  width: 1200px;
}
</style>
